<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站配置管理</title>
    <link rel="stylesheet" href="/libs/element-plus.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            font-family: Arial, sans-serif;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .card {
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .form-item {
            margin-bottom: 15px;
        }
        
        .form-item label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-item input, .form-item select, .form-item textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        .form-item textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        
        .btn-primary {
            background-color: #409eff;
            color: white;
        }
        
        .btn-default {
            background-color: #ecf5ff;
            color: #409eff;
        }
        
        .btn-danger {
            background-color: #f56c6c;
            color: white;
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .table th, .table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .table th {
            background-color: #f5f7fa;
            font-weight: bold;
        }
        
        .actions {
            white-space: nowrap;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #409eff;
            cursor: pointer;
            margin-right: 5px;
        }
        
        .loading {
            text-align: center;
            padding: 20px;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #409eff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .config-group {
            margin-bottom: 30px;
        }
        
        .config-group h3 {
            border-left: 4px solid #409eff;
            padding-left: 10px;
            margin-bottom: 15px;
        }
        
        .config-item {
            display: flex;
            margin-bottom: 15px;
            align-items: center;
        }
        
        .config-item label {
            width: 200px;
            font-weight: normal;
            margin-bottom: 0;
        }
        
        .config-item input, .config-item textarea {
            flex: 1;
        }
        
        .config-item .description {
            margin-left: 10px;
            color: #909399;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>网站配置管理</h2>
            <button class="btn btn-primary" onclick="saveConfigs()">保存配置</button>
        </div>
        
        <div class="card">
            <div id="loadingIndicator" class="loading" style="display: none;">
                <div class="spinner"></div>
                <p>加载中...</p>
            </div>
            
            <form id="configForm">
                <!-- 基本信息配置 -->
                <div class="config-group">
                    <h3>基本信息</h3>
                    <div class="config-item">
                        <label for="site_title">网站标题</label>
                        <input type="text" id="site_title" name="site_title">
                        <div class="description">网站的主标题</div>
                    </div>
                    <div class="config-item">
                        <label for="site_logo">网站Logo</label>
                        <input type="text" id="site_logo" name="site_logo">
                        <div class="description">网站Logo图片URL</div>
                    </div>
                    <div class="config-item">
                        <label for="site_description">网站描述</label>
                        <textarea id="site_description" name="site_description"></textarea>
                        <div class="description">网站的简短描述，用于SEO</div>
                    </div>
                    <div class="config-item">
                        <label for="site_keywords">关键词</label>
                        <input type="text" id="site_keywords" name="site_keywords">
                        <div class="description">网站关键词，多个关键词用逗号分隔</div>
                    </div>
                </div>
                
                <!-- 联系信息配置 -->
                <div class="config-group">
                    <h3>联系信息</h3>
                    <div class="config-item">
                        <label for="contact_email">联系邮箱</label>
                        <input type="email" id="contact_email" name="contact_email">
                        <div class="description">网站联系邮箱</div>
                    </div>
                    <div class="config-item">
                        <label for="contact_phone">联系电话</label>
                        <input type="tel" id="contact_phone" name="contact_phone">
                        <div class="description">网站联系电话</div>
                    </div>
                    <div class="config-item">
                        <label for="contact_address">联系地址</label>
                        <input type="text" id="contact_address" name="contact_address">
                        <div class="description">公司或组织的联系地址</div>
                    </div>
                </div>
                
                <!-- 备案信息配置 -->
                <div class="config-group">
                    <h3>备案信息</h3>
                    <div class="config-item">
                        <label for="icp_number">ICP备案号</label>
                        <input type="text" id="icp_number" name="icp_number">
                        <div class="description">网站ICP备案号</div>
                    </div>
                    <div class="config-item">
                        <label for="icp_url">备案查询链接</label>
                        <input type="text" id="icp_url" name="icp_url">
                        <div class="description">备案查询官方网站链接</div>
                    </div>
                    <div class="config-item">
                        <label for="security_record">公安备案号</label>
                        <input type="text" id="security_record" name="security_record">
                        <div class="description">公安备案号</div>
                    </div>
                    <div class="config-item">
                        <label for="security_record_url">公安备案链接</label>
                        <input type="text" id="security_record_url" name="security_record_url">
                        <div class="description">公安备案查询链接</div>
                    </div>
                </div>
                
                <!-- 其他配置 -->
                <div class="config-group">
                    <h3>其他配置</h3>
                    <div class="config-item">
                        <label for="copyright">版权信息</label>
                        <input type="text" id="copyright" name="copyright">
                        <div class="description">网站底部版权信息</div>
                    </div>
                    <div class="config-item">
                        <label for="analytics_code">统计代码</label>
                        <textarea id="analytics_code" name="analytics_code"></textarea>
                        <div class="description">网站统计代码（如百度统计、Google Analytics等）</div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="/libs/vue.global.prod.js"></script>
    <script src="/libs/element-plus.js"></script>
    
    <script>
        // 当前配置数据
        let configs = {};
        
        // 页面加载完成后获取数据
        document.addEventListener('DOMContentLoaded', async function() {
            showLoading(true);
            await loadConfigs();
            showLoading(false);
            fillForm();
        });
        
        // 显示/隐藏加载指示器
        function showLoading(show) {
            const loadingIndicator = document.getElementById('loadingIndicator');
            const configForm = document.getElementById('configForm');
            
            if (show) {
                loadingIndicator.style.display = 'block';
                configForm.style.display = 'none';
            } else {
                loadingIndicator.style.display = 'none';
                configForm.style.display = 'block';
            }
        }
        
        // 加载配置数据
        async function loadConfigs() {
            try {
                const response = await fetch('/config/list', {
                    credentials: 'include'
                });
                
                if (response.ok) {
                    const result = await response.json();
                    const configList = result.data || [];
                    configs = {};
                    configList.forEach(config => {
                        configs[config.key] = config.value;
                    });
                } else {
                    console.error('获取配置数据失败:', response.status);
                }
            } catch (error) {
                console.error('获取配置数据异常:', error);
            }
        }
        
        // 填充表单
        function fillForm() {
            // 基本信息
            document.getElementById('site_title').value = configs.site_title || '';
            document.getElementById('site_logo').value = configs.site_logo || '';
            document.getElementById('site_description').value = configs.site_description || '';
            document.getElementById('site_keywords').value = configs.site_keywords || '';
            
            // 联系信息
            document.getElementById('contact_email').value = configs.contact_email || '';
            document.getElementById('contact_phone').value = configs.contact_phone || '';
            document.getElementById('contact_address').value = configs.contact_address || '';
            
            // 备案信息
            document.getElementById('icp_number').value = configs.icp_number || '';
            document.getElementById('icp_url').value = configs.icp_url || '';
            document.getElementById('security_record').value = configs.security_record || '';
            document.getElementById('security_record_url').value = configs.security_record_url || '';
            
            // 其他配置
            document.getElementById('copyright').value = configs.copyright || '';
            document.getElementById('analytics_code').value = configs.analytics_code || '';
        }
        
        // 保存配置
        async function saveConfigs() {
            try {
                showLoading(true);
                
                // 收集表单数据
                const formData = new FormData(document.getElementById('configForm'));
                const configsToUpdate = [];
                
                for (const [key, value] of formData.entries()) {
                    configsToUpdate.push({
                        key: key,
                        value: value
                    });
                }
                
                // 发送批量更新请求
                const response = await fetch('/config/batch', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ configs: configsToUpdate }),
                    credentials: 'include'
                });
                
                if (response.ok) {
                    alert('配置保存成功');
                    // 重新加载配置
                    await loadConfigs();
                } else {
                    alert('配置保存失败');
                }
            } catch (error) {
                console.error('保存配置异常:', error);
                alert('保存配置时发生错误');
            } finally {
                showLoading(false);
            }
        }
    </script>
</body>
</html>